<template>
	<view class="u-page">
		<view class="u-demo-block">
			<view class="u-demo-block__content">
				<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
				<u--form labelPosition="left" :model="model1" ref="form1">
					<u-form-item label="头像" prop="myAvatar" borderBottom ref="item">
						<u-avatar :src="model1.myAvatar" @click="upAvatar"></u-avatar>
					</u-form-item>
					<u-form-item label="昵称" prop="userInfo.username" borderBottom ref="item1">
						<u--input v-model="model1.userInfo.username" border="none" ></u--input>
					</u-form-item>
					<u-form-item label="手机号码" prop="userInfo.phone" labelWidth="80" borderBottom >
						<u--input v-model="model1.userInfo.phone" border="none" readonly color="#8a8c8e" ></u--input>
					</u-form-item>
					<u-form-item label="性别" prop="userInfo.sex" borderBottom @click="showSex = true; hideKeyboard()"
						ref="item1">
						<u--input v-model="model1.userInfo.sex" disabled disabledColor="#ffffff" placeholder="请选择性别"
							border="none"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="个性签名" prop="userInfo.per_signature" borderBottom ref="item3">
						<u--textarea placeholder="不低于2个字" v-model="model1.userInfo.per_signature" count></u--textarea>
					</u-form-item>	
					<u-form-item label="地区" prop="userInfo.region" borderBottom >
						<u--input v-model="model1.userInfo.region" border="none" ></u--input>
					</u-form-item>
					<!-- <u-form-item label="生日" prop="userInfo.birthday" borderBottom
						@click="showBirthday = true; hideKeyboard()" ref="item1">
						<u--input v-model="model1.birthday" disabled disabledColor="#ffffff"
							placeholder="请选择生日" border="none"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item> -->
				</u--form>
				<u-button type="primary" text="修改" customStyle="margin-top: 50px" @click="submit"></u-button>
				<u-action-sheet :show="showSex" :actions="actions" title="请选择性别" 
					@close="showSex = false" @select="sexSelect">
				</u-action-sheet>
				<!-- <u-datetime-picker :show="showBirthday" :value="birthday" mode="date" closeOnClickOverlay
					@confirm="birthdayConfirm" @cancel="birthdayClose" @close="birthdayClose"></u-datetime-picker> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		created() {
			let id = uni.getStorageSync("token")
			this.showInfo(id)
		},
		data() {
			return {
				fileList1: [],
				disabled1: false,
				tips: '',
				value: '',
				showCalendar: false,
				showBirthday: false,
				model1: {
					userInfo: {
						// avatar: 'https://cdn.uviewui.com/uview/album/3.jpg',
						// username: '楼兰',
						// phone: '13674005942',
						// sex: '',
						// birthday: ''
					},
					myAvatar:'',
					code: ''
				},
				showSex: false,
				birthday: Number(new Date()),
				actions: [{
						name: '男',
					},
					{
						name: '女',
					},
				],
				rules: {
					'userInfo.username': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					
					},
					code: {
						type: 'string',
						required: true,
						len: 4,
						message: '请填写4位验证码',
						trigger: ['blur']
					},
					'userInfo.sex': {
						type: 'string',
						max: 1,
						required: true,
						message: '请选择男或女',
						trigger: ['blur', 'change']
					},
					intro: {
						type: 'string',
						min: 2,
						required: true,
						message: '不低于2个字',
						trigger: ['change']
					},
					'userInfo.birthday': {
						type: 'string',
						required: true,
						message: '请选择生日',
						trigger: ['change']
					},
				},
			}
		},
		onReady() {
			// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
			this.$refs.form1.setRules(this.rules)
		},
		methods: {
			afterRead(event) {
				this.fileList1.push({
					url: event.file,
					status: 'uploading',
					message: '上传中'
				})
			},
			groupChange(n) {
				// console.log('groupChange', n);
			},
			radioChange(n) {
				// console.log('radioChange', n);
			},
			navigateBack() {
				uni.navigateBack()
			},
			sexSelect(e) {
				this.model1.userInfo.sex = e.name
				this.$refs.form1.validateField('userInfo.sex')
			},
			change(e) {
				// console.log(e);
			},
			formatter(day) {
				const d = new Date()
				let month = d.getMonth() + 1
				const date = d.getDate()
				if (day.month == month && day.day == date + 3) {
					day.bottomInfo = '有优惠'
					day.dot = true
				}
				return day
			},
			calendarConfirm(e) {
				this.showCalendar = false
				this.model1.hotel = `${e[0]} / ${e[e.length - 1]}`
				this.$refs.form1.validateField('hotel')
			},
			codeChange(text) {
				this.tips = text;
			},
			
			calendarClose() {
				this.showCalendar = false
				this.$refs.form1.validateField('hotel')
			},
			// birthdayClose() {
			// 	this.showBirthday = false
			// 	this.$refs.form1.validateField('userInfo.birthday')
			// },
			// birthdayConfirm(e) {
			// 	this.showBirthday = false
			// 	this.model1.userInfo.birthday = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
			// 	this.$refs.form1.validateField('userInfo.birthday')
			// },
			submit() {
				// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
				this.$refs.form1.validate().then(res => {
					uni.request({
						url: 'http://localhost:8081/user/update',
						method: 'PUT',
						data: this.model1.userInfo,
						header: {
							'Content-Type': 'application/json'
						},
						dataType: 'json',
						success: (res) => {
							if (res.data.state == 200) {
								uni.$u.toast(res.data.message)
							} else {
								uni.$u.toast(res.data.message)
							}
						}
					})
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
			hideKeyboard() {
				uni.hideKeyboard()
			},
			upAvatar(){
				let _this = this;
				uni.chooseImage({
					count: 1, // 默认选择一张图片
					sizeType: ['original', 'compressed'], // original 原图， compressed 压缩图，默认两个都有
					success: (res) => {
						this.model1.myAvatar = res.tempFilePaths[0]
						this.model1.userInfo.avatar = res.tempFiles[0].name
						uni.uploadFile({
							url: 'http://localhost:8081/minioO/addImage', // 上传的接口地址
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'test'
							},
							success: (uploadFileRes) => {
								
							}
						});
					}
				})
			},
			showInfo(id){
				uni.request({
					url: 'http://localhost:8081/user/getUserById',
					method: 'GET',
					data: {
						id: id
					},
					success: (res) => {
						//this.model1.userInfo = res.data.data
						if (res.data.state == 200) {
							this.model1.userInfo = res.data.data
                            this.model1.myAvatar = res.data.data.avatar
                            this.model1.userInfo.avatar = res.data.data.avatar.slice(31)
						}
					}
				});
			}
		},
	}
</script>

<style lang="scss">
	.u-page {
		margin: 40rpx 40rpx;
	}
</style>
